<template>
	<div class='detail-container p-r'>
		<div class='detail-card dis-flex' :class="info.status=='未中奖'||info.status=='已撤单'?'no-draw':''">
			<div class="card-hd">
				<div class="p-r hour-bg">
					<div class="periods ft-24 co-white">第{{info.issue}}期</div>
					<div class="dis-flex hour-content align-center" style="overflow:hidden">
						<div class="hour-content-img">
							<img src="@/assets/yl_img1.png" class="hour-img" />
						</div>
						<div class="flex-1 hour-name">
							<div class="ft-32">{{info.lottery_name}}</div>
						</div>
						<div class="hour-time">
							<div class="ft-48">{{info.status}}</div>
						</div>
					</div>
					<div class="circle-d circle-l  p-a"></div>
					<div class="circle-d circle-r  p-a"></div>
				</div>
			</div>
			<div class="card-bd flex-1 p-r">
				<div class="card-bd-lists-1 ">
					<div class="card-bd-list dis-flex ft-36" v-if="info.status=='未中奖'">
						没有中奖，再接再厉哟～
					</div>
          <div class="card-bd-list dis-flex" v-else-if="info.status=='已中奖'">
            <div class="card-bd-list-tit">
              中奖金额
            </div>
            <div class="card-bd-list-ct flex-1">
              <span class="win-price win-color">{{info.winning_bonus}}</span>
              元
            </div>
          </div>
					<div class="card-bd-list dis-flex">
						<div class="card-bd-list-tit">
							开奖号码
						</div>
						<div class="card-bd-list-ct flex-1 ">
							<div class="dis-flex a-c" v-if="info.numArr.length>0">
								<div v-for="num in info.numArr" class="cirle">
									{{num}}
								</div>
							</div>
              <div v-else>等待开奖</div>
						</div>
					</div>
					<div class="card-bd-list dis-flex">
						<div class="card-bd-list-tit">
							竞猜玩法
						</div>
						<div class="card-bd-list-ct flex-1 lh-66 bold play-name">
							{{info.play_name}}
						</div>
					</div>
					<div class="card-bd-list dis-flex">
						<div class="card-bd-list-tit">
							竞猜号码
						</div>
						<div class="card-bd-list-ct flex-1">
							<div class="dis-flex a-c">
								<div class="guess-num dis-flex" v-for="item in info.selon">
									<div class="guess-num-l flex-1">{{item.bet_val}}</div>
									<div class="guess-num-r flex-1" :class="win_style?'guess-num-r-win':''">{{item.odds}}</div>
								</div>
							</div>
						</div>
					</div>
					<div class="card-bd-list dis-flex">
						<div class="card-bd-list-tit">
							竞猜时间
						</div>
						<div class="card-bd-list-ct flex-1 lh-66">
							{{info.add_time}}
						</div>
					</div>
				</div>
				<div class="card-bd-lists-2 flex">
					<div class="card-bd-list dis-flex">
						<div class="card-bd-list-tit">
							订单金额 
						</div>
						<div class="card-bd-list-ct flex-1 lh-66">
							<span class="win-price win-color">{{info.total_money}}</span>
							元
							<span class="win-price win-color" style="margin-left:10px;">{{info.winning_bonus}}</span>元
						</div>
					</div>
					<div class="card-bd-list dis-flex">
						<div class="card-bd-list-tit">
							投注返点  
						</div>
						<div class="card-bd-list-ct flex-1 lh-66">
							0.00%
						</div>
					</div>
				</div>
			</div>
		</div>
    <div class="bottom-div t-c">
      <a class="btn btn-red btn-circle btn-submit">再猜一次</a>
    </div>
	</div>
</template>
<script>
  import {getGuessDetail} from '@/api/home';
export default {
  data() {
    return {
      info:{},
      number1: "121212121",
      nums: [1, 2, 3, 4, 5, 6],
      win_style: 1 //1中奖;0未中奖
    };
  },
  mounted(){
    this.getGuessDetail();
  },
  methods:{
    getGuessDetail(){
      let id=this.$route.params.id;
      getGuessDetail(id).then(res=>{
        if (res.code==1) {
          res.data.numArr=res.data.lottery_number.split('');
          this.info=res.data;

        }
      });
    }
  }
};
</script>
<style lang="scss">
$win_bg: #ff4354;
$lose_bg: #958da5;
.detail-container {
  height: 100%;
  width: 100%;
  background: #f9f9f9;
  padding-top: 18px;
  box-sizing: border-box;
  .detail-card {
    .win-color {
      color: $win_bg;
    }
    height: 936px;
    width: 690px;
    margin: auto; // margin-top: 18px;
    flex-direction: column;
    .circle-d {
      width: 30px;
      height: 30px;
      bottom: 0;
      transform: translate(-50%, 50%);
      border-radius: 100%;
      background: #f9f9f9;
      z-index: 999;
    }
    .circle-l {
      left: 0;
    }
    .circle-r {
      right: 0;
      transform: translate(50%, 50%);
    }
    .card-bd-list {
      flex-direction: row;
			margin-bottom: 20px;
    }
    .card-bd {
      padding-left: 54px;
      padding-right: 54px;
      padding-top: 66px;
      .lh-66 {
        line-height: 66px;
      }
      .a-c {
        align-items: center;
        height: 100%;
      }
      .card-bd-list-tit {
        font-size: 28px;
        color: #958da5;
        line-height: 66px;
        margin-right: 30px;
      }
      .card-bd-list-ct {
        font-size: 28px;
        color: #958DA5;
        .win-price {
          font-size: 48px;
        }
        .cirle {
          display: inline-block;
          color: #ffffff;
          width: 48px;
          height: 48px;
          line-height: 48px;
          border-radius: 100%;
          vertical-align: middle;
          text-align: center;
          margin-right: 10px;
          background-color: $win-bg;
        }
				.guess-num{
          margin-right: 10px;
					border: 1px solid $win_bg;
					text-align: center;
					width: 144px;
					line-height: 52px;
					text-align: center;
					border-radius: 8px;
					font-size: 24px;
          color: #FD4658;
					.guess-num-l{
					}
					.guess-num-r{
						color: #ffffff;
						background: $lose_bg;
					}
					.guess-num-r-win{
						background: $win_bg;
					}
					.guess-num-lose{
						border: 1px solid $lose_bg;
					}
				}
      }
      .card-bd-lists-1 {
				padding-bottom: 20px;
        border-bottom: 1px solid #f5f5f5;
      }
			.card-bd-lists-2{
				padding-top: 40px;
				.win-price {
          font-size: 28px;
					margin-right: 10px;
        }
			}
      .bold {
        font-size: 32px;
        color: #605477;
      }
    }
  }
  .hour-main {
    margin: 40px 30px;
    background: #fef8f8;
    border-radius: 8px;
  }
  .hour-bg {
    height: 192px;
    background: url(../assets/hour-bg@3x.png);
    background-size: cover;
    border-radius: 12px;
  }
  .periods {
    position: absolute;
    left: 0;
    top: 0;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.1);
    border-top-left-radius: 15px;
  }
  .hour-content-img {
    margin-left: 46px;
  }
  .hour-img {
    width: 104px;
    height: 104px;
    margin-top: 18px;
  }

  .hour-name {
    margin-left: 30px;
  }
  .hour-content {
    padding-top: 36px;
    color: #fff;
  }
  .hour-time {
    margin-right: 40px;
  }
  .card-bd {
    background-color: #ffffff;
  }

  .no-draw{
    .win-color{color: #958DA5;}
    .card-bd-list{color: #958DA5;}
    .card-bd .card-bd-list-ct .cirle{
      background-color: #CCCBCF;
    }
    .card-bd .card-bd-list-ct .guess-num{

      color: #958DA5;
      border: 1px solid #CCCBCF;
    }
    .card-bd .card-bd-list-ct .guess-num .guess-num-r-win{
      background: #CCCBCF;
    }
    .card-bd .card-bd-list-ct.play-name{color: #958DA5;}
    .hour-bg{-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
  
    filter: gray;}
  }
}
.bottom-div{position: fixed;bottom: 0;width: 100%;left: 0;padding-bottom: 20px}

</style>